<!DOCTYPE html>
<html>
<head>
	<#import "../common/common.macro.ftl" as netCommon>
	<@netCommon.commonStyle />
	<!-- DataTables -->
	<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
	<!-- daterangepicker -->
	<link rel="stylesheet" href="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.css">
	<title>${I18n.admin_name}</title>
</head>
<body class="hold-transition skin-blue sidebar-mini <#if cookieMap?exists && cookieMap["xxljob_adminlte_settings"]?exists && "off" == cookieMap["xxljob_adminlte_settings"].value >sidebar-collapse</#if> ">
<div class="wrapper">
	<!-- header -->
	<@netCommon.commonHeader />
	<!-- left -->
	<@netCommon.commonLeft "script" />

	<!-- Content Wrapper. Contains page content -->
	<div class="content-wrapper">
		<!-- Content Header (Page header) -->
		<section class="content-header">
			<h1>${I18n.jobgroup_name}</h1>
		</section>

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-xs-5">
					<div class="input-group">
						<span class="input-group-addon" style="background-color: #00acd670">任务名称</span>
						<input type="text" class="form-control" id="scriptName" placeholder="脚本名称模糊查询" value = "${scriptPageName}">
					</div>
				</div>
				<div class="col-xs-5">
					<div class="input-group">
						<span class="input-group-addon" style="background-color: #00acd670">cookie</span>
						<input type="text" class="form-control" id="taskName" placeholder="任务名称模糊查询" >
					</div>
				</div>
				<div class="col-xs-2">
					<button class="btn btn-block btn-success add" type="button">${I18n.user_add}</button>
				</div>
			</div>
			<@netCommon.commonLogList />
		</section>
	</div>


	<!-- 新增.模态框 -->
	<div class="modal fade" id="addModal" tabindex="-1" role="dialog"  aria-hidden="true">
		<div class="modal-dialog " style="width:1200px">
			<div class="modal-content" style="height:300px">
				<div class="modal-header">
					<h4 class="modal-title" >日志下载工具</h4>
				</div>
				<div class="modal-body">
					<form class="form-horizontal form" role="form" >
						<div class="form-group">
							<div class="col-xs-4">
								<div class="input-group">
									<span class="input-group-addon">模式<font color="red">*</font></span>
									<select class="form-control" id="logStatus" >
										<option value="0" >beta-dubai</option>
										<option value="1" >beta-eventid</option>
										<option value="2" >商用-dubai</option>
										<option value="3" >商用-eventid</option>
										<option value="4" >差评用户对比</option>
										<option value="5" >${I18n.joblog_status_suc}</option>
										<option value="6" >${I18n.joblog_status_fail}</option>
										<option value="7" >${I18n.joblog_status_running}</option>
									</select>
								</div>
							</div>

							<div class="col-xs-4">
								<div class="input-group">
								<span class="input-group-addon">基线版本<font color="red">*</font></span>
								<input type="text" class="form-control" name="base" placeholder="${I18n.system_please_input}AppName" maxlength="64" >
								</div>
							</div>
							<div class="col-xs-4">
								<div class="input-group">
                		        <span class="input-group-addon">
	                  		     日期选择
								 </span>
								<input type="text" class="form-control" id="filterTime" name="time0" readonly>
								</div>
							</div>
						</div>
						<div class="form-group">
							<div class="col-xs-4">
								<div class="input-group">
									<span class="input-group-addon">
	                  		     excel上传
								 </span>
									<div class="col-sm-10">
										<input id="file-upload" type="file"  data-overwrite-initial="false" multiple>
									</div>
								</div>
							</div>

							<div class="col-xs-4">
								<div class="input-group">
									<span class="input-group-addon">比较版本<font color="red">*</font></span>
									<input type="text" class="form-control" name="compare" placeholder="${I18n.system_please_input}AppName" maxlength="64" >
								</div>
							</div>
							<div class="col-xs-4">
								<div class="input-group">
                		        <span class="input-group-addon">
	                  		     日期选择
								 </span>
									<input type="text" class="form-control" id="filterTime1" name="time1" readonly>
								</div>
							</div>
						</div>

						<hr>
						<div class="form-group">
							<div class="col-sm-offset-3 col-sm-6">
								<button type="submit" class="btn btn-primary"  >${I18n.system_save}</button>
								<button type="button" class="btn btn-default" data-dismiss="modal">${I18n.system_cancel}</button>
								<button type="button" class="btn btn-warning" title="Popover title"
										data-container="body" data-toggle="popover" data-placement="right"
										data-content="右侧的 Popover 中的一些内容">
									右侧的 Popover
								</button>
							</div>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>

	<!-- footer -->
	<@netCommon.commonFooter />
</div>

<@netCommon.commonScript />
<!-- DataTables -->
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<#--<script src="${request.contextPath}/static/js/jobgroup.index.1.js"></script>-->
<!-- daterangepicker -->
<script src="${request.contextPath}/static/adminlte/bower_components/moment/moment.min.js"></script>
<script src="${request.contextPath}/static/adminlte/bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<script>
	$(function () {
		$("[data-toggle='popover']").popover();
		// jquery.validate “low letters start, limit contants、 letters、numbers and line-through.”
		jQuery.validator.addMethod("myValid01", function(value, element) {
			var length = value.length;
			var valid = /^[a-z][a-zA-Z0-9-]*$/;
			return this.optional(element) || valid.test(value);
		}, I18n.jobgroup_field_appname_limit );

		$('.add').on('click', function () {
			$('#addModal').modal({backdrop: false, keyboard: false}).modal('show');
		});
		var addModalValidate = $("#addModal .form").validate({
			errorElement: 'span',
			errorClass: 'help-block',
			focusInvalid: true,
			rules: {
				appname: {
					required: true,
					rangelength: [4, 64],
					myValid01: true
				},
				title: {
					required: true,
					rangelength: [4, 12]
				}
			},
			messages: {
				appname: {
					required: I18n.system_please_input + "AppName",
					rangelength: I18n.jobgroup_field_appname_length,
					myValid01: I18n.jobgroup_field_appname_limit
				},
				title: {
					required: I18n.system_please_input + I18n.jobgroup_field_title,
					rangelength: I18n.jobgroup_field_title_length
				}
			},
			highlight: function (element) {
				$(element).closest('.form-group').addClass('has-error');
			},
			success: function (label) {
				label.closest('.form-group').removeClass('has-error');
				label.remove();
			},
			errorPlacement: function (error, element) {
				element.parent('div').append(error);
			},
			submitHandler: function (form) {
				$.post(base_url + "/jobgroup/save", $("#addModal .form").serialize(), function (data, status) {
					if (data.code == "200") {
						$('#addModal').modal('hide');
						layer.open({
							title: I18n.system_tips,
							btn: [I18n.system_ok],
							content: I18n.system_add_suc,
							icon: '1',
							end: function (layero, index) {
								jobGroupTable.fnDraw();
							}
						});
					} else {
						layer.open({
							title: I18n.system_tips,
							btn: [I18n.system_ok],
							content: (data.msg || I18n.system_add_fail),
							icon: '2'
						});
					}
				});
			}
		});
		$("#addModal").on('hide.bs.modal', function () {
			$("#addModal .form")[0].reset();
			addModalValidate.resetForm();
			$("#addModal .form .form-group").removeClass("has-error");
		});

		// addressType change
		$("#addModal input[name=addressType], #updateModal input[name=addressType]").click(function () {
			var addressType = $(this).val();
			var $addressList = $(this).parents("form").find("textarea[name=addressList]");
			if (addressType == 0) {
				$addressList.css("background-color", "#eee");	// 自动注册
				$addressList.attr("readonly", "readonly");
				$addressList.val("");
			} else {
				$addressList.css("background-color", "white");
				$addressList.removeAttr("readonly");
			}
		})



		// filter Time
		var rangesConf = {};
		rangesConf[I18n.daterangepicker_ranges_recent_hour] = [moment().subtract(1, 'hours'), moment()];
		rangesConf[I18n.daterangepicker_ranges_today] = [moment().startOf('day'), moment().endOf('day')];
		rangesConf[I18n.daterangepicker_ranges_yesterday] = [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')];
		rangesConf[I18n.daterangepicker_ranges_this_month] = [moment().startOf('month'), moment().endOf('month')];
		rangesConf[I18n.daterangepicker_ranges_last_month] = [moment().subtract(1, 'months').startOf('month'), moment().subtract(1, 'months').endOf('month')];
		rangesConf[I18n.daterangepicker_ranges_recent_week] = [moment().subtract(1, 'weeks').startOf('day'), moment().endOf('day')];
		rangesConf[I18n.daterangepicker_ranges_recent_month] = [moment().subtract(1, 'months').startOf('day'), moment().endOf('day')];

		$('#filterTime').daterangepicker({
			//防止被模态框遮挡
			container:"#addModal",
			autoApply:false,
			singleDatePicker:false,
			showDropdowns:false,        // 是否显示年月选择条件
			timePicker: false, 			// 是否显示小时和分钟选择条件
			timePickerIncrement: 10, 	// 时间的增量，单位为分钟
			timePicker24Hour : true,
			opens : 'left', //日期选择框的弹出位置
			ranges: rangesConf,
			locale : {
				format: 'YYYY-MM-DD',
				separator : ' - ',
				customRangeLabel : I18n.daterangepicker_custom_name ,
				applyLabel : I18n.system_ok ,
				cancelLabel : I18n.system_cancel ,
				fromLabel : I18n.daterangepicker_custom_starttime ,
				toLabel : I18n.daterangepicker_custom_endtime ,
				daysOfWeek : I18n.daterangepicker_custom_daysofweek.split(',') ,        // '日', '一', '二', '三', '四', '五', '六'
				monthNames : I18n.daterangepicker_custom_monthnames.split(',') ,        // '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
				firstDay : 1
			},
			startDate: rangesConf[I18n.daterangepicker_ranges_today][0],
			endDate: rangesConf[I18n.daterangepicker_ranges_today][1]
		});

		$('#filterTime1').daterangepicker({
			//防止被模态框遮挡
			container:"#addModal",
			autoApply:false,
			singleDatePicker:false,
			showDropdowns:false,        // 是否显示年月选择条件
			timePicker: false, 			// 是否显示小时和分钟选择条件
			timePickerIncrement: 10, 	// 时间的增量，单位为分钟
			timePicker24Hour : true,
			opens : 'left', //日期选择框的弹出位置
			ranges: rangesConf,
			locale : {
				format: 'YYYY-MM-DD',
				separator : ' - ',
				customRangeLabel : I18n.daterangepicker_custom_name ,
				applyLabel : I18n.system_ok ,
				cancelLabel : I18n.system_cancel ,
				fromLabel : I18n.daterangepicker_custom_starttime ,
				toLabel : I18n.daterangepicker_custom_endtime ,
				daysOfWeek : I18n.daterangepicker_custom_daysofweek.split(',') ,        // '日', '一', '二', '三', '四', '五', '六'
				monthNames : I18n.daterangepicker_custom_monthnames.split(',') ,        // '一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'
				firstDay : 1
			},
			startDate: rangesConf[I18n.daterangepicker_ranges_today][0],
			endDate: rangesConf[I18n.daterangepicker_ranges_today][1]
		});
	});


</script>
</body>
</html>
